<template>
	<view class="drop-account">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="title">您正在注销{{ infoData.app_name }}账户{{ member.nickname }}</view>
		<view class="title-tips">注销账户后，将放弃以下权利，请您谨慎操作</view>
		<view class="content">
			<view class="form">
				<text class="item" v-for="(item, index) in infoData.rights" :key="index">{{ index+1 }}. {{ item }}</text>
			</view>
		</view>
		<view class="tips">
			<view class="grey">温馨提示：</view>
			<view class="light-grey">{{ infoData.tips }}</view>
		</view>

		<view class="footer">
			<view class="tips">
				<u-checkbox-group>
					<u-checkbox v-model="agree" @change="change">
						<template #label>
							我已阅读并同意
							<text @click="goPage('drop')">《注销协议》</text>
						</template>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="btn-box">
				<u-button style="width: 100%" @click="dropAccount">确认注销</u-button>
				<u-button style="width: 100%" type="primary" @click="pageTabRoute('/pages/tabbar/profile/profile')">暂不注销
				</u-button>
			</view>
		</view>
		<u-modal :show="show" confirm-text="立刻注销" cancel-text="我再想想" cancel-color="#001DB0" confirm-color="#F80057"
			:show-cancel-button="true" @confirm="confirmDrop" @cancel="cancelDrop" @close="cancelDrop"
			:content="content" title="账号注销确认"></u-modal>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '账户注销引导',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		infoData: {},
		member: false,
		show: false,
		agree: false,
		content: '',
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getMemberInfo();
		getInfoData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getMemberInfo() {
		state.member = {
			nickname: '王云海',
		}
	}

	function getInfoData() {
		state.infoData = {
			app_name: '伴君盈',
			rights: ['账户信息、历史交易信息等将被清空且无法恢复；', '当前等级及积分将被清空且无法恢复；', '可用红包、商品券等将被删除；', '历史交易可能产生的资金退回权益等将视作自动放弃；'],
			tips: '请确保账户红包为空，所有交易已完结且无纠纷，最后一笔订单完成时间大于15天，请确保账户状态正常且无任何被限制的记录；'
		};
	}

	function change() {
		state.agree = !state.agree;
	}

	function dropAccount() {
		console.log(state.agree);
		if (!state.agree) {
			util.showTip('必须同意注销协议才能继续');
			return;
		}

		if (state.agree) {
			state.content = '注销后将失去所有权益';
			state.show = true;
		}
	}

	function confirmDrop() {
		console.log('执行注销操作');
		state.show = false;
	}

	function cancelDrop() {
		state.show = false;
	}

	function goPage(type) {
		uni.navigateTo({
			url: '/userPages/agreement/agreement?type=' + type
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		infoData,
		member,
		show,
		agree,
		content,
	} = toRefs(state);
</script>

<style lang="scss">
	.drop-account {
		.title {
			font-size: 42rpx;
			margin: 40rpx 32rpx 0;
			color: #000000;
		}

		.title-tips {
			margin: 0 32rpx;

			font-size: 28rpx;
		}

		.content {
			.form {
				margin: 40rpx 32rpx 0;
				background: #ffffff;
				border-radius: 10rpx;
				box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.08);
				position: relative;
				z-index: 10;
				display: flex;
				flex-direction: column;
				padding: 32rpx;


				.item {
					font-size: 30rpx;
					line-height: 46rpx;
					color: #000000;
					margin-bottom: 32rpx;
				}
			}
		}

		.tips {
			font-size: 26rpx;
			padding: 48rpx 36rpx;
			box-sizing: border-box;
			text-align: justify;
			line-height: 48rpx;

			.grey {
				color: #555;
				padding-bottom: 8rpx;
			}

			.light-grey {
				color: #888;
				line-height: 40rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			margin: 0;
			padding: 0;

			.tips {
				// color: #000;
			}

			.btn-box {
				display: flex;
				flex-direction: row;
			}
		}
	}
</style>